<template>
  <div class="articlePage">
    <el-row>
      <el-col :span="4">
        <el-input v-model="domainText" suffix-icon="el-icon-search" placeholder="请输入域名"></el-input>
      </el-col>
      <el-col :span="8" :offset="12" align="right">
        <el-button type="primary" icon="el-icon-plus" @click="btnClick('add')">添加文章</el-button>
      </el-col>
    </el-row>

    <el-table class="tableList" :data="articleData" stripe height="85%" v-loading="loading">
      <!-- <el-table-column type="index" label align="center"></el-table-column> -->
      <el-table-column prop="id" label="ID" align="center"></el-table-column>
      <!-- <el-table-column prop="sort" label="排序" align="center"></el-table-column> -->
      <el-table-column prop="domain" label="域名" align="center"></el-table-column>
      <el-table-column prop="title" label="标题" align="center"></el-table-column>
      <el-table-column label="文章地址" align="center">
        <template slot-scope="scope">
          <a
            :href="scope.row.domain + '/article/?id=' +  scope.row.id"
            target="_blank"
            class="underLine"
          >{{scope.row.domain + '/article/?id=' + scope.row.id}}</a>
        </template>
      </el-table-column>
      <el-table-column prop="addtime" label="添加时间" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.type != 'set' && scope.row.is_del == 1">
            <el-button size="mini" @click="articleEdit(scope.row, 'edit')">编辑</el-button>
            <el-button size="mini" type="danger" @click="articleEdit(scope.row, 'del')">删除</el-button>
          </div>
          <el-button
            v-else-if="scope.row.is_del == '2'"
            type="warning"
            size="mini"
            @click="articleEdit(scope.row, 'restore')"
          >恢复</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      @current-change="pageChange"
    ></el-pagination>
  </div>
</template>

<script>
import Service from "../../services/main";
export default {
  name: "Article",
  data() {
    return {
      domainText: "",
      articleData: [],
      paegNo: 1,
      pageSize: 10,
      total: null,
      loading: false
    };
  },
  created() {
    this.getArticleData();
  },
  methods: {
    // 新增或返回
    btnClick() {
      this.$router.push("/newArticle/new");
    },

    // 页面切换
    pageChange(val) {
      this.pageNo = val;
      this.getArticleData();
    },

    // 获取文章数据
    getArticleData() {
      let params = {
        page: this.pageNo,
        domain: this.domainText
      };
      this.loading = true;
      Service.getArticle(this, params).then(res => {
        this.articleData = res.result.list;
        this.total = res.result.total;
        this.loading = false;
      });
    },

    // 文章编辑，删除，恢复，操作
    articleEdit(data, type) {
      var that = this;
      if (type === "edit") {
        this.$router.push("/NewArticle/" + data.id);
      } else if (type === "del") {
        Service.delArticle(this, { id: data.id }).then(res => {
          if (res.errorCode == "0") {
            this.getArticleData();
            that.$message({
              message: "文章删除成功！",
              type: "warning"
            });
          }
        });
      } else if (type === "restore") {
        Service.restoreArticle(this, { id: data.id }).then(res => {
          if (res.errorCode == "0") {
            this.getArticleData();
            that.$message({
              message: "文章恢复成功！",
              type: "success"
            });
          }
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.articlePage {
  position: relative;
  height: 100%;
}
.tableList {
  margin-top: 30px;
}

.el-pagination {
  text-align: right;
  margin-top: 20px;
}
</style>